<script setup>
// 引入接口请求
import { userLogin } from '@/api/user'
// 引入用户仓库
import { useUser } from '@/stores/index'
// 通知提示引入
// import { ElNotification } from 'element-plus'
import { ref } from "vue";
// 获取整个表单的信息
const form = ref()

// 登录表单填写的数据
const loginForm = ref({
  username: '',
  password: ''
})

const drawer = ref(true) // 控制抽屉是否显示

// 当点击表单以外的其他区域时弹出一个确认框
const handleClose = () => {
  ElMessageBox.confirm('你确定要关闭这个窗口吗?')
    .then(() => {
      drawer.value = false // 关闭抽屉
      emit('success')
    })
}

// 表单校验规则
const rules = ref({
  username: [
    { required: true, message: "请输入登录用户名", trigger: 'blur' },
    { min: 3, max: 18, message: '用户名长度需在3-18位字符之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15位的字符',
      trigger: 'blur'
    }
  ]
})

// 提交登录表单
const emit = defineEmits(['success'])
// 创建用户仓库实例
const userStore = useUser()
const onSubmit = async () => {
  // console.log(await form.value.validate());
  if (await form.value.validate() === true) {
    // 代表表单中都输入了数据可以进行登录验证操作
    // const { username, password } = loginForm.value
    const { data } = await userLogin(loginForm.value)

    if (data.data != null) {
      // 登录成功
      // 进行提示
      ElMessage({
        message: '登录成功~',
        type: 'success',
      })
      // 1.先将用户信息进行存储到仓库中
      userStore.setUser(data.data)
      // 2.将登录验证成功后将用户信息先进行存储
      sessionStorage.setItem('user', JSON.stringify(data))
      // 3.再将后端返回回来的token进行存储
      sessionStorage.setItem('token', 'Bearer ' + data.data.token)
    } else {
      // 登录失败
      // 进行提示
      ElMessage({
        message: '当前用户名或密码错误~',
        type: 'warning',
      })
    }
  } else {
    // 进行提示
    console.log(console.error(123));
  }
  drawer.value = false // 关闭抽屉
  emit('success');
}

</script>
<template>
  <!-- 对话框 -->
  <el-dialog v-model="drawer" :before-close="handleClose" :show-close="false" title="登录" width="30%">
    <!-- form表单 -->
    <el-form :model="loginForm" :rules="rules" ref="form" autocomplete="off" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="loginForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="loginForm.password" type="password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button @click="emit('success')">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style>
</style>
